<template>
  <el-card class="form-container" shadow="never">
    <el-form :model="productCate" :rules="rules" ref="menuFrom" label-width="auto">
      <el-form-item label="分类名称：" prop="name">
        <el-input v-model="productCate.name"></el-input>
      </el-form-item>
      <el-form-item label="上级分类：">
        <el-select v-model="productCate.parentId" placeholder="请选择分类">
          <el-option v-for="item in selectProductCateList" :key="item.id" :label="item.name" :value="item.id"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="数量单位：">
        <el-input v-model="productCate.productUnit"></el-input>
      </el-form-item>
      <el-form-item label="排序：">
        <el-input v-model="productCate.sort"></el-input>
      </el-form-item>
      <el-form-item label="是否显示：">
        <el-radio-group v-model="productCate.showStatus">
          <el-radio :value="1">是</el-radio>
          <el-radio :value="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否显示在导航栏：">
        <el-radio-group v-model="productCate.navStatus">
          <el-radio :value="1">是</el-radio>
          <el-radio :value="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="分类图标：">
        <!-- <single-upload v-model="productCate.icon"></single-upload> -->
      </el-form-item>
      <el-form-item v-for="(item, index) in filterProductAttrList" :label="index === 0 ? '筛选属性：' : ''" :key="index">
        <el-cascader
          clearable
          v-model="filterProductAttrList[index]"
          :options="filterAttrs"
          :props="{ children: 'productAttributeList', label: 'name', value: 'id' }"
        >
        </el-cascader>
        <el-button style="margin-left: 20px" @click.prevent="removeFilterAttr(index)">删除</el-button>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" @click="handleAddFilterAttr">新增</el-button>
      </el-form-item>
      <el-form-item label="关键词：">
        <el-input v-model="productCate.keywords"></el-input>
      </el-form-item>
      <el-form-item label="分类描述：">
        <el-input type="textarea" :autosize="true" v-model="productCate.description"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button v-if="!currentId" @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script setup lang="ts">
import { fetchList, createProductCate, updateProductCate, getProductCate } from '@/api/productCate'
import { fetchListWithAttr } from '@/api/productAttrCate'
import { getProductAttrInfo } from '@/api/productAttr'
import { ref, onMounted, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, type FormInstance } from 'element-plus'
import type { ProductCate, ProductCateDto } from '@/models/productCate'
import type { ProductAttrCateItem } from '@/models/productAttrCate'

defineOptions({ name: 'ProductCateDetail' })
const rules = {
  name: [
    { required: true, message: '请输入品牌名称', trigger: 'blur' },
    { min: 2, max: 140, message: '长度在 2 到 140 个符', trigger: 'blur' },
  ],
}
const route = useRoute()
const router = useRouter()
const menuFrom = ref<FormInstance>()
const productCate = ref<ProductCateDto>({})
const selectProductCateList = ref<ProductCate[]>([])
const filterAttrs = ref<ProductAttrCateItem[]>([])
const filterProductAttrList = ref<number[][]>([])
const currentId = computed(() => Number(route.query.id))
onMounted(async () => {
  if (currentId.value) {
    const response = await getProductCate(currentId.value)
    productCate.value = response.data.data
    const res = await getProductAttrInfo(currentId.value)
    filterProductAttrList.value = res.data.data?.map((item) => [item.attributeCategoryId, item.attributeId])
  } else {
    productCate.value = { productAttributeIdList: [] }
  }
  getSelectProductCateList()
  getProductAttrCateList()
})
async function getSelectProductCateList() {
  const response = await fetchList(0, { pageSize: 100, pageNum: 1 })
  selectProductCateList.value = response.data.data.list
  selectProductCateList.value.unshift({ id: 0, name: '无上级分类' })
}
async function getProductAttrCateList() {
  const response = await fetchListWithAttr()
  filterAttrs.value = response.data.data
}
function getProductAttributeIdList() {
  return filterProductAttrList.value.filter((item) => item?.length === 2).map((item) => item[1])
}
async function onSubmit() {
  await menuFrom.value?.validate()
  if (currentId.value) {
    productCate.value.productAttributeIdList = getProductAttributeIdList()
    await updateProductCate(productCate.value)
    ElMessage.success('修改成功')
  } else {
    productCate.value.productAttributeIdList = getProductAttributeIdList()
    await createProductCate(productCate.value)
    menuFrom.value?.resetFields()
    ElMessage.success('提交成功')
  }
  resetForm()
  router.back()
}
function resetForm() {
  menuFrom.value?.resetFields()
  productCate.value = { productAttributeIdList: [] }
  getSelectProductCateList()
  filterProductAttrList.value = [[]]
}
function removeFilterAttr(index: number) {
  filterProductAttrList.value.splice(index, 1)
  filterProductAttrList.value.length || filterProductAttrList.value.push([])
}
function handleAddFilterAttr() {
  if (filterProductAttrList.value.length === 3) {
    ElMessage.warning('最多添加三个')
    return
  }
  filterProductAttrList.value.push([])
}
</script>

<style scoped></style>
